{% extends 'base.html' %}

{% block title %}Page Not Found | TaskFlow{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8 text-center">
            <h1 class="display-1 text-warning">404</h1>
            <h2 class="mb-4">Page Not Found</h2>
            <p class="lead">The page you're looking for doesn't exist or has been moved.</p>
            <p>You may have mistyped the address or the page may have been removed.</p>
            <div class="mt-4">
                <a href="{% url 'home' %}" class="btn btn-primary">
                    <i class="fas fa-home me-2"></i>Return to Homepage
                </a>
                <button onclick="history.back()" class="btn btn-outline-secondary ms-2">
                    <i class="fas fa-arrow-left me-2"></i>Go Back
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    body {
        background-color: #f8f9fa;
    }
    .display-1 {
        font-size: 8rem;
        font-weight: 700;
    }
</style>
{% endblock %}